import React from 'react'
import { renderRoutes } from 'react-router-config'
import Sider from './components/Sider/index.js'
import TopHeader from './components/TopHeader/index.js'
import Footer from './components/Footer/index.js'
import {isLogin} from './components/Sider/store/actions.js'
import withStyle from './withStyle'
import styles from  '../normalize.css'
import {connect} from 'react-redux'


const App = (props) => {
	// console.log(props.route.routes)

	return (
		<div>
			<Sider staticContext={props.staticContext}></Sider>
			<div style={{overflow: 'hidden', paddingLeft: props.hideSelf ? '0' : '240px', transition: '0.4s cubic-bezier(0.18, 0.81, 0.3, 0.89)'}}>
				<TopHeader staticContext={props.staticContext}></TopHeader>
				<div style={{minHeight:'calc(100vh - 106px)'}}>
				{ renderRoutes(props.route.routes) }
				</div>
				<Footer staticContext={props.staticContext}></Footer>
			</div>
		</div>
	)
}

App.loadData = (store) => {
	return store.dispatch(isLogin())
}

const matchState = (state) => ({
	hideSelf: state.sider.hideSelf
})

export default connect(matchState, null)(withStyle(App, styles))